<template>
  <div class="wuyi-list" >
      <div class="goods-item" v-for="(item,index) in compData.data.goodsList" >
          
          <sa-preview :url="item.image" size="90"></sa-preview>
          <div class="goods-title">{{ item.title }}</div>
          <div class="goods-subtitle">{{ item.subtitle }}</div>
          <div class="goods-price">{{ item.price[0] }}</div>
          <div class="buy-btn">立即购买</div>
      </div>
      
  </div>
</template>

<script setup>
import { computed,onMounted } from 'vue';
import { checkUrl } from '@/sheep/utils/checkUrlSuffix';
const imgUrl=import.meta.env.SHEEP_IMG_URL
const props = defineProps(['compData']);
const listData =  computed(()=>props.compData.data.templateList[props.compData.data.tabIndex])

const calcSrc= computed(()=>{
  return imgUrl+props.compData.bgImg
})

function handlerSrc(item){
  return imgUrl+item.image;
}



onMounted(()=>{
  console.log('props.compData',props.compData)
})

</script>
<style lang="scss" scoped>
.wuyi-list{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  height:304px !important;

 
  
}

.goods-item{
  
  display:flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;

  margin-top:30px;
  width: 155px;
  height: 244px;
  background: #FFFFFF;
  border-radius: 14px;
  background-color: #fff;
}
.goods-item:nth-child(1){
  margin-right: 10px;
}

.goods-title{
  margin-top: 10px;;
  margin-left:11px;
  margin-right: 11px;
  height: 40px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  font-size: 16px;
  color: #080506;
  line-height: 20px;
  text-align: center;



 overflow: hidden;  // 超出的文本隐藏
 text-overflow: ellipsis; // 溢出用省略号显示
 display: -webkit-box; // 将对象作为弹性伸缩盒子模型显示。
 -webkit-line-clamp: 2; // 这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。
 -webkit-box-orient: vertical;  // 从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
}

.goods-subtitle{
  margin-top:10px;
  height: 20px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  font-size: 14px;
  color: #080506;
  line-height: 20px;
  text-align: center;
  white-space: nowrap;         /* 不换行 */
  overflow: hidden;            /* 超出部分隐藏 */
  text-overflow: ellipsis;     /* 显示省略号 */
}

.goods-price{

  height: 14px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  font-size: 16px;
  color: #FB0036;
  line-height: 20px;
}

.buy-btn{
  padding:5px 25px;
  margin-top:14px;
  border-radius: 10px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  font-size: 20px;
  color: #CE021E;
  line-height: 20px;
  text-align: center;
  background-color: #FDDAA1;
  }


</style>
